<template>
  <div class="login">
    <div class="login-con">
      <a-card class="login_card">
        <h1 style="text-align: center; font-weight: bold; color: #31bc63">
          欢迎登录
        </h1>
        <h5 style="text-align: center; font-size: 14px; font-weight: bold">
          百分网开发者平台
        </h5>
        <div class="form-con">
          <a-form
            :model="formData"
            ref="formRef"
            :colon="false"
            autocomplete="off"
            hideRequiredMark
          >
            <a-form-item
              label=""
              name="username"
              :rules="[{ required: true, message: '不能为空' }]"
            >
              <a-input
                class="my_input"
                placeholder="请输入开发者账号"
                v-model:value="formData.username"
              >
                <!-- <template #prefix>
                  <UserOutlined class="input-icon" />
                </template> -->
              </a-input>
            </a-form-item>

            <a-form-item
              label=""
              name="password"
              :rules="[{ required: true, message: '不能为空' }]"
            >
              <a-input-password
                placeholder="请输入密码"
                class="my_input"
                v-model:value="formData.password"
              >
                <!-- <template #prefix>
                  <LockOutlined class="input-icon" />
                </template> -->
              </a-input-password>
              <!-- <a-input
                placeholder="请输入密码"
                v-model:value="formData.password"
              >
                <template #suffix>
                  <a-button>忘记密码</a-button> 
                </template>
              </a-input> -->
            </a-form-item>
            <!-- <a-form-item style="text-align: right">
                <a href="/reset-password">忘记密码?</a>
              </a-form-item> -->

            <a-form-item :wrapper-col="{ span: 24 }" nostyle>
              <a-button
                type="primary"
                class="login-btn"
                :loading="loginLoading"
                @click="iLogin"
                >登 录</a-button
              >
            </a-form-item>
            <a-form-item :rules="[{ required: true, message: '不能为空' }]">
              <a-checkbox v-model:checked="formData.agree">
                <span style="font-size: 12px">
                  我已阅读并同意百分网《<a
                    href="/developer-agreement"
                    class="login-tip"
                    >开发者协议条款</a
                  >》和《<a href="/privacy-policy" class="login-tip">隐私政策</a
                  >》
                </span>
              </a-checkbox>
            </a-form-item>
            <a-form-item style="text-align: center">
              <div class="login_mode">
                <a-button type="link" class="login-tip" @click="loginCode"
                  >验证码登录</a-button
                >
                <a-button type="link" class="login-tip">开发者注册</a-button>
              </div>
              <!-- <a href="/register"></a>
              <span style="margin: 0 8px">|</span>
              <a href="/captcha-login"></a> -->
            </a-form-item>
          </a-form>
        </div>
        <!-- <p class="login-tip">请输入账号、密码后登录</p> -->
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, Ref } from "vue";
import { loginApi } from "@/api/login";
import * as formValidator from "@/utils/form-validator";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
import { loadingPromise } from "@/utils/tools";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { useSystemStore } from "@/store/system";

onMounted(() => {
  // 清空本地的信息存储
  localStorage.clear();
  sessionStorage.clear();
});

const router = useRouter();

const formRef: Ref = ref();
const loginLoading = ref<boolean>(false);
const formData = reactive({
  username: "admin",
  password: "123456",
  agree: false,
});

// 登录
const iLogin = async () => {
  if (!(await formValidator.formVerify(formRef))) return;
  // 表单通过
  loginLoading.value = true;
  let apiData = {
    ...formData,
  };
  loginApi(apiData)
    .then(async (res) => {
      const { menuList } = res.data;
      const systemStore = useSystemStore();
      systemStore.setUserInfo(res.data);
      systemStore.setMenuListFromApi(menuList);

      message.success("登录成功！");
      loginLoading.value = false;
      await loadingPromise();
      router.replace({
        name: systemStore.indexPageObj.name,
      });
    })
    .catch((err) => {
      loginLoading.value = false;
    });
};

const loginCode = () => {
  console.log(11111);
};
</script>

<style scoped lang="less">
.my_input {
  height: 37px;
}
.login {
  width: 100vw;
  height: 100vh;
  background: url(~"@/assets/login/login-bg.jpg") no-repeat center center /
    cover;

  &-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;

    .form-con {
      padding-top: 10px;
      .input-icon {
        color: #808695;
      }
      .login-btn {
        width: 100%;
        background: #31bc63;
        border-radius: 3px 3px 3px 3px;
      }
    }
    .login-tip {
      font-size: 12px;
      text-align: center;
      color: #31bc63;
      font-style: normal;
    }
  }
}
.login_card {
  padding-top: 20px;
  height: 450px;
  width: 405px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  // justify-content: center;
}
.login_mode {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
